<template>
  <div class="detail-page">
    <header class="app-header">
      <a @click="back()" class="app-header-left" href="javascript:;">
        <i class="iconfont iconarrow-left"></i>返回
      </a>
      详情
    </header>
    <div class="detail-wrapper">
      <h2 class="detail-title">{{ item.title }}</h2>
      <i class="detail-info">by {{ item.author }}, {{ item.date }}</i>
      <div class="detail-content markdown-body" v-html="markedContent"></div>
      <DetailCommentList :bdid="item.id" />
    </div>
    <footer class="detail-footer">
      <DetailFooter v-if="detailFooterStatus" />
      <DetailComment :bdid="item.id" v-else />
    </footer>
  </div>
</template>

<script>
import marked from "marked";
import "github-markdown-css";
import DetailFooter from "./detailFooter";
import DetailComment from "./detailComment";
import DetailCommentList from "./detailCommentList";
import { mapState, mapActions } from "vuex";
export default {
  name: "detail",
  // props: {
  //   item: {
  //     type: Object,
  //     default() {
  //       return {};
  //     },
  //   },
  // },
  props: ["id"],
  data() {
    return {
      markedContent: "",
    };
  },
  errorCaptured() {
    // console.log(99);
  },
  async created() {
    await this.getItemById(this.id);
    this.markedContent = marked(this.item.content || "");
  },
  mounted() {
    // console.log(this.$route);
    // console.log(this.item.id);
    // if (!this.item.id) {
    //   this.$router.push("/msbd");
    // }
  },
  methods: {
    ...mapActions("detail", ["getItemById"]),
    back() {
      this.$router.back();
      // this.$parent.showDetail = false;
    },
  },
  computed: {
    ...mapState("msbd", ["detailFooterStatus"]),
    ...mapState("detail", ["item"]),
  },
  components: {
    DetailFooter,
    DetailComment,
    DetailCommentList,
  },
};
</script>

<style scoped>
.detail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  /*  */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: #fff;
}

.detail-footer {
  /* height: 60px; */
  border-top: 1px solid #eeeeee;
  /* background-color: #999999; */
}

.detail-wrapper {
  flex-grow: 1;
  padding: 10px;
  /* margin: 10px; */
  height: 300px;
  overflow-y: auto;
}

.detail-title {
  font-weight: normal;
  font-size: 20px;
}

.detail-info {
  color: #999999;
  font-size: 12px;
  display: block;
  text-align: right;
  margin: 5px 0;
}

.detail-content {
  font-size: 16px;
}

/* .app-header i {
  font-size: 25px;
  vertical-align: bottom;
} */
</style>